<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 绝区零社区</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/dashboard.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <img src="images/logo.png" alt="绝区零社区">
                <span>绝区零社区</span>
            </div>
            <div class="nav-links">
                <a href="home.html">首页</a>
                <a href="#">攻略中心</a>
                <a href="#">角色图鉴</a>
                <a href="forum.html">社区论坛</a>
                <a href="agentvotes.html">角色排行</a>
            </div>
            <div class="user-profile">
                <div class="user-avatar">
                    <img src="images/default-avatar.png" alt="用户头像">
                    <div class="user-dropdown">
                        <div class="dropdown-header">
                            <img src="images/default-avatar.png" alt="用户头像">
                            <div class="user-info">
                                <h4>用户名</h4>
                                <p>UID: 12345678</p>
                            </div>
                        </div>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fas fa-user"></i> 个人主页</a></li>
                            <li><a href="#"><i class="fas fa-gamepad"></i> 绑定游戏账号</a></li>
                            <li><a href="#"><i class="fas fa-cog"></i> 账号设置</a></li>
                            <li><a href="#"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="dashboard-container">
        <div class="dashboard-sidebar">
            <ul class="sidebar-menu">
                <li class="active"><a href="#"><i class="fas fa-home"></i> 个人主页</a></li>
                <li><a href="#"><i class="fas fa-gamepad"></i> 游戏账号</a></li>
                <li><a href="#"><i class="fas fa-user-edit"></i> 个人资料</a></li>
                <li><a href="#" id="changePasswordMenu"><i class="fas fa-key"></i> 修改密码</a></li>
                <li><a href="#"><i class="fas fa-file-alt"></i> 我的帖子</a></li>
                <li><a href="#"><i class="fas fa-bell"></i> 消息通知</a></li>
                <li><a href="#"><i class="fas fa-star"></i> 我的收藏</a></li>
                <li><a href="#"><i class="fas fa-history"></i> 浏览历史</a></li>
            </ul>
        </div>

        <div class="dashboard-content">
            <div class="content-header">
                <h2><i class="fas fa-user-circle"></i> 个人主页</h2>
                <p class="header-subtitle">欢迎回来，管理您的个人信息和社区活动</p>
            </div>

            <!-- 个人信息卡片 -->
            <div class="profile-card">
                <div class="profile-header">
                    <div class="profile-avatar">
                        <img src="images/default-avatar.png" alt="用户头像">
                        <button class="edit-avatar"><i class="fas fa-camera"></i></button>
                    </div>
                    <div class="profile-info">
                        <h3>用户名</h3>
                        <p class="user-id">UID: 12345678</p>
                        <div class="user-level-info">
                            <div class="level-badge">
                                <span class="level-number">1</span>
                                <span class="level-name">新手</span>
                            </div>
                            <div class="experience-bar">
                                <div class="exp-progress" style="width: 0%"></div>
                                <span class="exp-text">0/100 经验</span>
                            </div>
                        </div>
                        <div class="profile-stats">
                            <div class="stat-item">
                                <span class="stat-value">0</span>
                                <span class="stat-label">关注</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value">0</span>
                                <span class="stat-label">粉丝</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value">0</span>
                                <span class="stat-label">帖子</span>
                            </div>
                        </div>
                    </div>
                    <button class="edit-profile-btn"><i class="fas fa-edit"></i> 编辑资料</button>
                </div>
            </div>

            <!-- 等级信息卡片 -->
            <div class="level-card">
                <div class="card-header">
                    <h3><i class="fas fa-trophy"></i> 等级信息</h3>
                    <button class="view-history-btn"><i class="fas fa-history"></i> 经验历史</button>
                </div>
                <div class="level-content">
                    <div class="level-overview">
                        <div class="level-details">
                            <div class="current-level">
                                <h4>当前等级</h4>
                                <div class="level-display">
                                    <span class="level-number-large">1</span>
                                    <span class="level-name-large">新手</span>
                                </div>
                            </div>
                            <div class="experience-details">
                                <h4>经验值进度</h4>
                                <div class="exp-info">
                                    <span class="current-exp">0</span>
                                    <span class="exp-separator">/</span>
                                    <span class="next-level-exp">100</span>
                                    <span class="exp-unit">经验</span>
                                </div>
                                <div class="experience-bar-large">
                                    <div class="exp-progress-large" style="width: 0%"></div>
                                </div>
                                <p class="exp-to-next">距离下一级还需 100 经验</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 游戏账号绑定卡片 -->
            <div class="game-account-card">
                <div class="card-header">
                    <h3><i class="fas fa-gamepad"></i> 游戏账号</h3>
                    <button class="bind-account-btn"><i class="fas fa-plus"></i> 绑定账号</button>
                </div>
                <div class="account-list">
                    <div class="account-info" id="accountInfo" style="display: none;">
                        <div class="account-item">
                            <div class="account-details">
                                <div class="account-icon">
                                    <i class="fas fa-gamepad"></i>
                                </div>
                                <div class="account-text">
                                    <h4>绝区零</h4>
                                    <p class="uid-display">UID: <span id="gameUidDisplay">未绑定</span></p>
                                </div>
                            </div>
                            <div class="account-actions">
                                <button class="unbind-account-btn" id="unbindAccountBtn">
                                    <i class="fas fa-unlink"></i> 解绑
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="empty-state" id="emptyAccountState">
                        <i class="fas fa-gamepad"></i>
                        <p>暂未绑定游戏账号</p>
                        <button class="bind-account-btn">立即绑定</button>
                    </div>
                </div>
            </div>

            <!-- 游戏角色管理卡片 -->
            <div class="characters-card">
                <div class="card-header">
                    <h3><i class="fas fa-users"></i> 游戏角色</h3>
                    <div class="character-actions">
                        <button class="privacy-settings-btn"><i class="fas fa-shield-alt"></i> 隐私设置</button>
                        <button class="add-character-btn"><i class="fas fa-plus"></i> 添加角色</button>
                    </div>
                </div>
                <div class="characters-container">
                    <div class="characters-list">
                        <div class="loading-characters">
                            <i class="fas fa-spinner fa-spin"></i>
                            <p>加载中...</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 我的帖子管理卡片 -->
            <div class="my-posts-card">
                <div class="card-header">
                    <h3><i class="fas fa-file-alt"></i> 我的帖子</h3>
                    <div class="post-actions">
                        <button class="refresh-posts-btn"><i class="fas fa-sync-alt"></i> 刷新</button>
                        <a href="create-post.html" class="create-post-btn"><i class="fas fa-plus"></i> 发布新帖</a>
                    </div>
                </div>
                <div class="posts-container">
                    <div class="posts-filter">
                        <select class="sort-select">
                            <option value="latest">最新发布</option>
                            <option value="hot">最热门</option>
                            <option value="likes">最多点赞</option>
                            <option value="comments">最多评论</option>
                        </select>
                    </div>
                    <div class="posts-list">
                        <div class="loading-posts">
                            <i class="fas fa-spinner fa-spin"></i>
                            <p>加载中...</p>
                        </div>
                    </div>
                    <div class="posts-pagination">
                        <button class="prev-page" disabled>上一页</button>
                        <span class="page-info">第 1 页，共 1 页</span>
                        <button class="next-page" disabled>下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 编辑个人信息模态窗口 -->
    <div class="modal" id="editProfileModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑个人信息</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editProfileForm">
                    <div class="form-group">
                        <label for="nickname">昵称</label>
                        <input type="text" id="nickname" name="nickname" required>
                    </div>
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <select id="gender" name="gender">
                            <option value="0">未知</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email">
                    </div>
                    <div class="form-group">
                        <label>选择头像</label>
                        <div class="avatar-selection">
                            <div class="avatar-option" data-avatar="images/avatar1.png">
                                <img src="images/avatar1.png" alt="头像1">
                            </div>
                            <div class="avatar-option" data-avatar="images/avatar2.png">
                                <img src="images/avatar2.png" alt="头像2">
                            </div>
                            <div class="avatar-option" data-avatar="images/avatar3.png">
                                <img src="images/avatar3.png" alt="头像3">
                            </div>
                            <div class="avatar-option" data-avatar="images/avatar4.png">
                                <img src="images/avatar4.png" alt="头像4">
                            </div>
                            <div class="avatar-option" data-avatar="images/avatar5.png">
                                <img src="images/avatar5.png" alt="头像5">
                            </div>
                            <div class="avatar-option" data-avatar="images/avatar6.png">
                                <img src="images/avatar6.png" alt="头像6">
                            </div>
                        </div>
                        <input type="hidden" id="selectedAvatar" name="avatar" value="">
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存</button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 隐私设置模态窗口 -->
    <div class="modal" id="privacySettingsModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>隐私设置</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="privacySettingsForm">
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="showProfile" name="showProfile">
                            <span class="checkmark"></span>
                            显示个人资料
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="showGameProgress" name="showGameProgress">
                            <span class="checkmark"></span>
                            显示游戏进度
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="showCharacters" name="showCharacters">
                            <span class="checkmark"></span>
                            显示角色收集
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="showOnlineStatus" name="showOnlineStatus">
                            <span class="checkmark"></span>
                            显示在线状态
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="showLastLoginTime" name="showLastLoginTime">
                            <span class="checkmark"></span>
                            显示最后登录时间
                        </label>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存设置</button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加游戏角色模态窗口 -->
    <div class="modal" id="addCharacterModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加游戏角色</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="addCharacterForm">
                    <div class="form-group">
                        <label for="characterName">角色名称</label>
                        <input type="text" id="characterName" name="characterName" required>
                    </div>
                    <div class="form-group">
                        <label for="characterLevel">角色等级</label>
                        <input type="number" id="characterLevel" name="characterLevel" min="1" max="80" required>
                    </div>
                    <div class="form-group">
                        <label for="characterRarity">稀有度</label>
                        <select id="characterRarity" name="characterRarity" required>
                            <option value="">请选择</option>
                            <option value="3星">3星</option>
                            <option value="4星">4星</option>
                            <option value="5星">5星</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="characterElement">元素类型</label>
                        <select id="characterElement" name="characterElement" required>
                            <option value="">请选择</option>
                            <option value="物理">物理</option>
                            <option value="火">火</option>
                            <option value="冰">冰</option>
                            <option value="雷">雷</option>
                            <option value="风">风</option>
                            <option value="量子">量子</option>
                            <option value="虚数">虚数</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="characterPath">命途</label>
                        <select id="characterPath" name="characterPath" required>
                            <option value="">请选择</option>
                            <option value="毁灭">毁灭</option>
                            <option value="巡猎">巡猎</option>
                            <option value="智识">智识</option>
                            <option value="同谐">同谐</option>
                            <option value="虚无">虚无</option>
                            <option value="存护">存护</option>
                            <option value="丰饶">丰饶</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="characterAvatar">角色头像URL</label>
                        <input type="url" id="characterAvatar" name="characterAvatar">
                    </div>
                    <div class="form-group">
                        <label for="characterConstellation">命座等级</label>
                        <input type="number" id="characterConstellation" name="characterConstellation" min="0" max="6" value="0">
                    </div>
                    <div class="form-group">
                        <label for="characterEidolon">光锥等级</label>
                        <input type="number" id="characterEidolon" name="characterEidolon" min="0" max="5" value="0">
                    </div>
                    <div class="form-group">
                        <label for="characterSkillLevel">技能等级</label>
                        <input type="number" id="characterSkillLevel" name="characterSkillLevel" min="1" max="15" value="1">
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">添加角色</button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑游戏角色模态窗口 -->
    <div class="modal" id="editCharacterModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑游戏角色</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editCharacterForm">
                    <input type="hidden" id="editCharacterId" name="characterId">
                    <div class="form-group">
                        <label for="editCharacterName">角色名称</label>
                        <input type="text" id="editCharacterName" name="characterName" required>
                    </div>
                    <div class="form-group">
                        <label for="editCharacterLevel">角色等级</label>
                        <input type="number" id="editCharacterLevel" name="characterLevel" min="1" max="80" required>
                    </div>
                    <div class="form-group">
                        <label for="editCharacterRarity">稀有度</label>
                        <select id="editCharacterRarity" name="characterRarity" required>
                            <option value="">请选择</option>
                            <option value="3星">3星</option>
                            <option value="4星">4星</option>
                            <option value="5星">5星</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editCharacterElement">元素类型</label>
                        <select id="editCharacterElement" name="characterElement" required>
                            <option value="">请选择</option>
                            <option value="物理">物理</option>
                            <option value="火">火</option>
                            <option value="冰">冰</option>
                            <option value="雷">雷</option>
                            <option value="风">风</option>
                            <option value="量子">量子</option>
                            <option value="虚数">虚数</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editCharacterPath">命途</label>
                        <select id="editCharacterPath" name="characterPath" required>
                            <option value="">请选择</option>
                            <option value="毁灭">毁灭</option>
                            <option value="巡猎">巡猎</option>
                            <option value="智识">智识</option>
                            <option value="同谐">同谐</option>
                            <option value="虚无">虚无</option>
                            <option value="存护">存护</option>
                            <option value="丰饶">丰饶</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editCharacterAvatar">角色头像URL</label>
                        <input type="url" id="editCharacterAvatar" name="characterAvatar">
                    </div>
                    <div class="form-group">
                        <label for="editCharacterConstellation">命座等级</label>
                        <input type="number" id="editCharacterConstellation" name="characterConstellation" min="0" max="6" value="0">
                    </div>
                    <div class="form-group">
                        <label for="editCharacterEidolon">光锥等级</label>
                        <input type="number" id="editCharacterEidolon" name="characterEidolon" min="0" max="5" value="0">
                    </div>
                    <div class="form-group">
                        <label for="editCharacterSkillLevel">技能等级</label>
                        <input type="number" id="editCharacterSkillLevel" name="characterSkillLevel" min="1" max="15" value="1">
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存修改</button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 绑定游戏账号模态窗口 -->
    <div class="modal" id="bindGameAccountModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>绑定游戏账号</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="bindGameAccountForm">
                    <div class="form-group">
                        <label for="gameUid">游戏UID</label>
                        <input type="text" id="gameUid" name="gameUid" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">绑定</button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑帖子模态窗口 -->
    <div class="modal" id="editPostModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑帖子</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editPostForm">
                    <input type="hidden" id="editPostId" name="postId">
                    <div class="form-group">
                        <label for="editPostTitle">标题</label>
                        <input type="text" id="editPostTitle" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="editPostType">帖子类型</label>
                        <select id="editPostType" name="post_type" required>
                            <option value="攻略">攻略</option>
                            <option value="讨论">讨论</option>
                            <option value="视频">视频</option>
                            <option value="资讯">资讯</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editPostCategory">分类</label>
                        <select id="editPostCategory" name="category" required>
                            <option value="角色">角色</option>
                            <option value="装备">装备</option>
                            <option value="副本">副本</option>
                            <option value="剧情">剧情</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editPostContent">内容</label>
                        <textarea id="editPostContent" name="content" rows="8" required></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">保存修改</button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除确认模态窗口 -->
    <div class="modal" id="deletePostModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认删除</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>确定要删除这篇帖子吗？此操作不可撤销。</p>
                <div class="form-actions">
                    <button type="button" class="btn-danger" id="confirmDeleteBtn">确认删除</button>
                    <button type="button" class="btn-secondary close-modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 经验历史模态窗口 -->
    <div class="modal" id="experienceHistoryModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>经验值获取历史</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="history-container">
                    <div class="history-filters">
                        <select class="action-filter">
                            <option value="">全部动作</option>
                            <option value="post_create">发布帖子</option>
                            <option value="daily_login">每日登录</option>
                            <option value="profile_complete">完善资料</option>
                            <option value="game_uid_bind">绑定游戏账号</option>
                            <option value="avatar_upload">上传头像</option>
                        </select>
                    </div>
                    <div class="history-list">
                        <div class="loading-history">
                            <i class="fas fa-spinner fa-spin"></i>
                            <p>加载中...</p>
                        </div>
                    </div>
                    <div class="history-pagination">
                        <button class="prev-page" disabled>上一页</button>
                        <span class="page-info">第 1 页，共 1 页</span>
                        <button class="next-page" disabled>下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态窗口 -->
    <div class="modal" id="changePasswordModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>修改密码</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="changePasswordForm">
                    <div class="form-group">
                        <label for="oldPassword">当前密码</label>
                        <div class="password-input-group">
                            <input type="password" id="oldPassword" name="oldPassword" placeholder="请输入当前密码" required>
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                        <span class="error-message" id="oldPasswordError"></span>
                    </div>
                    <div class="form-group">
                        <label for="newPassword">新密码</label>
                        <div class="password-input-group">
                            <input type="password" id="newPassword" name="newPassword" placeholder="请输入新密码" required>
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                        <span class="error-message" id="newPasswordError"></span>
                        <div class="password-strength">
                            <div class="strength-bar">
                                <div class="strength-fill" id="strengthFill"></div>
                            </div>
                            <span class="strength-text" id="strengthText">密码强度：弱</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirmNewPassword">确认新密码</label>
                        <div class="password-input-group">
                            <input type="password" id="confirmNewPassword" name="confirmNewPassword" placeholder="请再次输入新密码" required>
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                        <span class="error-message" id="confirmNewPasswordError"></span>
                    </div>
                    <div class="password-requirements">
                        <h4>密码要求：</h4>
                        <ul>
                            <li id="req-length"><i class="fas fa-circle"></i> 至少6位字符</li>
                            <li id="req-letter"><i class="fas fa-circle"></i> 包含字母</li>
                            <li id="req-number"><i class="fas fa-circle"></i> 包含数字</li>
                            <li id="req-special"><i class="fas fa-circle"></i> 包含特殊字符（可选）</li>
                        </ul>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary" id="changePasswordBtn">
                            <i class="fas fa-key"></i> 修改密码
                        </button>
                        <button type="button" class="btn-secondary close-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="js/dashboard-simple.js"></script>
</body>
</html>